<template>
  <div>
    <div :style="{height: toolbarHei +'px'}"></div>
    <nut-navbar title="订单修改" left-text="返回" left-show @click-back="clickLeft"></nut-navbar>
    <div style="padding-top: 5px;">
      <div class="info">
        <div  style="font-size: 18px;color: black;">{{state.invoice.buName}}</div>
        <div class="mt5"  style="font-size: 14px;display: flex;">
          <div style="flex:1;">{{state.invoice.billNo}}</div>
          <div>{{state.invoice.billDate}}</div>
        </div>
        <div style="display:flex;">
           <span style="margin-right:50px;flex:1;">
              <nut-price :price="state.invoice.amount"></nut-price>
            </span>
          <nut-space>
            <nut-tag type="success">
              {{state.invoice.billStateName}}
            </nut-tag>
            <nut-tag >
              {{state.invoice.printState}}
            </nut-tag>
            <nut-tag type="primary">{{state.invoice.skState}}</nut-tag>
          </nut-space>
        </div>
        <div style="font-size:13px;padding: 3px;margin-top:5px;" v-if="state.invoice.remark">
          <nut-tag color="grey">{{state.invoice.remark}}</nut-tag>
        </div>
      </div>
      <div style="height:calc(100vh - 190px);overflow: auto;">
        <div style="background-color:white;border:1px solid rgba(0,0,0,0.05);border-radius:4px;margin-bottom:5px;" >
          <div class="cart-body" >
            <div v-for="(item, index) in state.invoice.infos" :key="index" style="margin-bottom:10px;background-color:white;" >
              <nut-swipe >
                <div class="good-item">
                  <div class="good-img" style="margin-left:5px;">
                    <nut-image
                        :src="item.imageUrl"
                        width="80"
                        height="80"
                    />
                  </div>
                  <div class="good-desc">
                    <div class="good-title"   @click="altGood(item)">
                      {{ item.invName }}
                    </div>
                    <div style="text-align: right;padding-right: 10px;display:flex;"   @click="altGood(item)">
                      <div style="font-size:13px;">1 * {{item.spec}}</div>
                      <div style="flex:1;">
                        x <span class="qty"> {{item.qty}}</span> <span> {{item.unit}}</span>
                      </div>
                    </div>
                    <div   @click="altGood(item)">
                      <span v-if="item.send" style="color: #1e9fff;"> {{ item.send }}</span>
                      <span style="margin-left:5px;" v-if="item.deduction">返<nut-price :price="item.deduction" size="small" /></span>
                    </div>
                    <div class="good-btn">
                      <div  @click="altGood(item)">
                        <span><nut-price :price="item.price"></nut-price></span>
                      </div>
                      <nut-input-number
                          :min="1" :step="1"
                          @overlimit="overlimit(index)"
                          @change="change(index)"
                          v-model="item.qty"
                      />
                    </div>
                    <div style="margin-top:5px;" v-if="item.remark"  @click="altGood(item)">
                      <nut-tag color="grey">{{item.remark}}</nut-tag>
                    </div>
                  </div>
                </div>
                <template #right>
                  <nut-button
                      square
                      plain
                      @click="deleteGood(index)"
                  >
                    <Del />
                  </nut-button>
                </template>
              </nut-swipe>
            </div>
          </div>
        </div>
        <div style="text-align:center;">
          <nut-button type="primary" :loading="state.submitLoading"  style="margin-left:30px;" @click="onSubmit">保存修改</nut-button>
        </div>
      </div>
    </div>
    <altgood top="80px" :saveToCart="false" ref="altRef" @altSuc="altSuc" />
  </div>
</template>
<script setup>
import tool from "@/utils/tool";
import {useGlobal} from "@/stores/useGlobal";
import { Del } from '@nutui/icons-vue';
const global = useGlobal()
// import goodItem from "@/components/zd/goodItem.vue";
import altgood from "@/views/stock/cart/altgood.vue";
import {computed, onActivated, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
const router = useRouter()
const route = useRoute()
const state = ref({
  billNo: '',
  invoice: {},
  submitLoading: false,
  currentRow: {}
})
const altRef = ref(null)
const toolbarHei = computed(() => {
  return global.statusBarHeight
})
onActivated(() => {
  getList()
})
const clickLeft = () => {
  router.go(-1)
}
const altGood = (item) => {
  state.value.currentRow = item
  item.name = item.invName
  altRef.value.altData(item)
}
const altSuc = (good) => {
  let infos = state.value.invoice.infos
  for (let i = 0; i < infos.length; i++) {
    if(infos[i].id === good.id) {
      state.value.invoice.infos[i].price = good.price
      state.value.invoice.infos[i].send = good.send
      state.value.invoice.infos[i].qty = good.qty
      state.value.invoice.infos[i].unit = good.unit
      state.value.invoice.infos[i].remark = good.remark
      state.value.invoice.infos[i].deduction = good.deduction
      state.value.invoice.infos[i].amount = good.amount
    }
  }
  updata()
}
const deleteGood = (index) => {
  if(state.value.invoice.infos.length === 1) {
    return tool.err('至少一行商品')
  }
  state.value.invoice.infos.splice(index, 1)
  updata()
}
const getList = () => {
  state.value.billNo = route.query.billNo
  if(state.value.billNo) {
    tool.post('app/xsdetail', {billNo: state.value.billNo}).then(ret => {
      ret.data.infos.map(row => {
        row.amount = tool.xe.toFixed(row.amount, 2)
        row.price = tool.xe.toFixed(row.price, 2)
        row.deduction = tool.xe.toFixed(row.deduction, 2)
      })
      ret.data.amount = tool.xe.toFixed(ret.data.amount, 2)
      ret.data.infos.map(row => {
        row.name = row.invName
        row.deduction = tool.xe.toNumber(row.deduction)
      })
      state.value.invoice = ret.data
    })
  }
}
const onSubmit = () => {
  tool.post('app/editSale', state.value.invoice).then(ret => {
    router.go(-1)
  })
}
const change = (index) => {
  state.value.invoice.infos[index].amount = tool.xe.multiply(tool.xe.subtract(state.value.invoice.infos[index].price, state.value.invoice.infos[index].deduction),state.value.invoice.infos[index].qty)
  updata()
}
const updata = () => {
  let infos = state.value.invoice.infos
  let sub = tool.xe.sum(infos, 'amount')
  state.value.invoice.totalAmount = sub
  state.value.invoice.amount = sub
}
const overlimit = (index) => {
  if(state.value.invoice.infos.length === 1) {
    return tool.err('至少一行商品')
  }
  state.value.invoice.infos.splice(index, 1)
  updata()
}


</script>

<style scoped lang="scss">
.cart-body {
  padding-top:5px;
  .good-item {
    display: flex;
    .good-img {
      padding: 2px 0;
    }
    .good-desc {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      padding: 5px;
      .good-title {
        font-size: 13px;
        font-weight: bold;
      }
      .qty {
        font-size:16px;
        padding-right:5px;
        color: #1e9fff;;
      }
      .good-btn {
        display: flex;
        justify-content: space-between;
        .price {
          font-size: 16px;
          color: red;
        }
        .van-icon-delete {
          font-size: 20px;
          margin-top: 4px;
        }
        padding-right:5px;
      }
    }
  }
  .delete-button {
    width: 50px;
    height: 100%;
  }
}
.cell {
  width: 60px;
}
.info {
  font-size: 15px;
  width: 100%;
  color: #6b6d71;
  td {
    padding: 2px 0;
  }
}
.good {
  background-color: white;
  padding: 10px;
  margin: 10px 5px 0 5px;
  font-size: 14px;
  color: #333333;
  border-radius: 4px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.price {
  color: #c45656;
}
.footer {
  background-color: red;
  height: 35px;
  line-height: 35px;
}
</style>